<template>
  <el-image ref="image" style="border: 0.5px solid #f0f0f0; border-radius: 4px;" :src="comSrc" v-bind="$attrs" :style="style" :class="classes" :preview-src-list="[comSrc]"
    @load="load">
    <template #error>
      <img src="~@/assets/images/null-img.png" alt="">
    </template>


  </el-image>
</template>

<script setup>
import { computed, ref } from 'vue'
const props = defineProps({
  src: { type: String, default: '' },
  width: { type: Number, default: 100 },
  height: { type: Number, default: 100 },
  disabled: Boolean
})
const classes = ref('is--width-full')
const comSrc = computed(() => {
  if (props.src.indexOf('picture.irobotbox') > -1) {
    return `${props.src}?x-oss-process=image/resize,w_${props.width || 40},h_${props.height || props.width || 40
      }`
  }
  return props.src
})
const style = computed(() => {
  let style = {}
  if (props.width) {
    style.width = props.width + 'px'
  }
  if (props.height) {
    style.height = props.height + 'px'
  }
  return style
})
const load = (e) => {
  const { target } = e
  const width = target.offsetWidth
  const height = target.offsetHeight
  if (width < height) classes.value = 'is--height-full'
}
</script>

<style lang="scss" scoped>
.el-image {
  .el-image__wrapper {
    .image-slot {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}

.is--width-full {

  .el-image__inner,
  .el-image__placeholder,
  .el-image__error {
    width: 100%;
    height: auto;
  }
}

.is--height-full {

  .el-image__inner,
  .el-image__placeholder,
  .el-image__error {
    width: auto;
    height: 100%;
  }
}

.el-image__wrapper {
  display: flex;
  justify-content: center;
  justify-content: center;
}
</style>
